import {designPage} from "@peryl/react-compose";
import {Alert, Box, Button, i18n, PageCard, PageCardContent, PageCardTitle, Paragraph, ParagraphItem} from "plain-design";
import {microApp} from "../../microApp";
import {pathJoin} from "@peryl/utils/pathJoin";

export default designPage(() => {

  function buildAccessPath(path: string) {
    const purePath = pathJoin(window.location.origin, microApp.baseRoutePublicPath.get(), path);
    return <a href={purePath} target="_blank"><Button mode="text">{purePath}</Button></a>;
  }

  return () => (
    <>
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.pageNavigationTitle').d("系统页面导航功能简介")}/>
        <PageCardContent>
          <Paragraph order list="page.predefineRoutePage.pageNavigationDescription"/>
        </PageCardContent>
      </PageCard>
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.pagePredefineRouteTitle').d("预定义路由")}/>
        <PageCardContent>
          <p style={{ marginTop: 0 }}>{i18n.$intl('page.predefineRoutePage.pagePredefineRouteIntroduce').d("为了解决无法通过路由打开指定页面的问题，设计了一种预定义路由API，开发者可以通过API预定义定义路由，当用户访问这些预定义路由时，就能打开指定的页面；目前一共有五种预定义路由：")}</p>
          <Paragraph list="page.predefineRoutePage.pagePredefineRouteDescription"/>
        </PageCardContent>
        <PageCardContent>
          <Paragraph list="page.predefineRoutePage.pagePredefineRouteDescription2"/>
        </PageCardContent>
      </PageCard>
      <PageCard>
        <Box className="no-padding">
          <Alert>{i18n.$intl('page.predefineRoutePage.tip').d("以下示例功能建议打开无痕浏览器访问测试")}</Alert>
        </Box>
      </PageCard>
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.privateRouteTitle').d("Private 路由")}/>
        <PageCardContent>
          <Paragraph>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.defineRoute').d("定义路由")}: {`microApp.route.definePageRoute({ route: '/private/order/:privateCode', path: 'react-base/demo/demo-private-layout-page', });`}
            </ParagraphItem>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.accessRoute').d("访问路由")}: {buildAccessPath("/private/order/123?token=admin")}
            </ParagraphItem>
          </Paragraph>
        </PageCardContent>
      </PageCard>

      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.publicRouteTitle').d("Public 路由")}/>
        <PageCardContent>
          <Paragraph>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.defineRoute').d("定义路由")}: {`microApp.route.definePageRoute({ route: '/public/order/:publicCode', path: 'react-base/demo/demo-public-layout-page', });`}
            </ParagraphItem>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.accessRoute').d("访问路由")}: {buildAccessPath("/public/order/456")}
            </ParagraphItem>
          </Paragraph>
        </PageCardContent>
      </PageCard>

      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.homeRouteMenuCodeTitle').d("Home 路由: menuCode")}/>
        <PageCardContent>
          <Paragraph>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.defineRoute').d("定义路由")}: {`microApp.route.definePageRoute({ route: '/home/menu/:menuCode', path: 'react-base/core/home-menu-page', title: 'TestHomeRouteMenu' });/*通过menuCode打开指定的菜单*/`}
            </ParagraphItem>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.accessRoute').d("访问路由")}: {buildAccessPath("/home/menu/appMenu.userInfo?token=admin")}
            </ParagraphItem>
          </Paragraph>
        </PageCardContent>
      </PageCard>

      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.homeRoutePagePathTitle').d("Home 路由: pagePath")}/>
        <PageCardContent>
          <Paragraph>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.defineRoute').d("定义路由")}: {`microApp.route.definePageRoute({ route: '/home/path/:pagePath', path: 'react-base/core/home-path-page', title: 'TestHomeRoutePath' });/*通过pagePath打开指定页面*/`}
            </ParagraphItem>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.accessRoute').d("访问路由")}: {buildAccessPath("/home/path/xxx/yyy-page?token=admin")}
            </ParagraphItem>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.accessRoute').d("访问路由")}: {buildAccessPath("/home/path/xxx/zzz-page?token=admin")}
            </ParagraphItem>
          </Paragraph>
        </PageCardContent>
        <PageCardContent>
          <Paragraph list="page.predefineRoutePage.homeRoutePageDescription"/>
        </PageCardContent>
      </PageCard>

      <PageCard>
        <PageCardTitle title={i18n.$intl('page.predefineRoutePage.loginRouteTitle').d("Login 路由")}/>
        <PageCardContent>
          <Paragraph>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.defineRoute').d("定义路由")}: {`microApp.route.defineLayoutRoute({ path: 'login', render: () => <RouterLogin/> });`}
            </ParagraphItem>
            <ParagraphItem>
              {i18n.$intl('page.predefineRoutePage.accessRoute').d("访问路由")}: {buildAccessPath("/login")}
            </ParagraphItem>
          </Paragraph>
        </PageCardContent>
        <PageCardContent>
          <Paragraph list="page.predefineRoutePage.loginRoutePageDescription"/>
        </PageCardContent>
      </PageCard>
    </>
  );
});
